<template>
    <div class="notice-list" v-loading="loading">
        <common-list @resert="resert" ref="commonListRef">
            <template #operate="{ scope }">
                <el-button link type="primary" size="small" @click="toCheckItemDetails(scope)">详情</el-button>
                <div class="line" />
                <el-button link type="primary" size="small" @click="toCheckItemDetails(scope)">编辑</el-button>
                <div class="line" />
                <el-button link type="primary" size="small" @click="deletes(scope)">删除</el-button>
            </template>
            <template #state="{ scope }">
                <el-switch v-model="scope.scope.row.state" :active-value="1" :inactive-value="0" inline-prompt active-text="开" inactive-text="关" @change="change(scope.scope.row)" />
            </template>
            <template #btns>
                <div class="btns">
                    <el-button type="primary" @click="add">新建模板</el-button>
                    <w-button @click="allDeletes">批量删除</w-button>
                </div>
            </template>
        </common-list>
        <el-dialog destroy-on-close v-model="dialogVisible" title="新建模板" :close-on-click-modal="false" width="30%">
            <el-form :model="form" label-width="68px" :rules="rules" hide-required-asterisk ref="ruleFormRef">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="模版名称" prop="templateName">
                            <el-input maxlength="30" v-model="form.templateName" placeholder="请输入模版名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="三级部件" prop="structureId">
                            <el-select filterable style="width: 100%" v-model="form.structureId" placeholder="请选择三级部件" @change="structureChange">
                                <el-option v-for="item in formConfig[0].options" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="模版备注">
                            <el-input maxlength="30" v-model="form.remark" placeholder="请输入模版备注" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="flex">
                        <el-form-item label-width="0" prop="templateId">
                            <el-radio-group v-model="radio" style="padding-right: 12px">
                                <el-radio :label="true" @click.native.prevent="templateClick(true)">使用已有检查项模版</el-radio>
                            </el-radio-group>
                            <el-select v-model="form.templateId" placeholder="请选择检查项模版">
                                <el-option v-for="item in templateOption" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="button">
                    <div class="submit" @click="submit">
                        <text class="submitText">提交</text>
                    </div>
                    <div class="close" @click="close">
                        <text class="closeText">取消</text>
                    </div>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
import { provide, reactive, ref } from "vue";
import { tableConfig, formConfig, rules } from "./checkItemTemplateLibraryConfig";
import {
    getinspectionitemtamplatepage,
    getthirdstructurelist,
    addstrategyinspectionitemtemplate,
    getinspectionitemtemplatelist,
    batchdeletetemplate,
    edittemplatestate
} from "@/service/api/tacticalManagement.js";
import { mainStore } from "@/store/main.js";
import { useRouter } from "vue-router";
import wButton from "@/components/wButton.vue";

const store = mainStore();
const router = useRouter();
const commonListRef = ref(null);
const dialogVisible = ref(false);
const formData = reactive({ structureId: "", name: "", state: "" });
const templateOption = ref([]);
const form = ref({
    templateName: "",
    remark: "",
    structureId: "",
    templateId: "",
    structureName: ""
});
const ruleFormRef = ref(null);
const radio = ref(false);
const loading = ref(false);
const first = ref(true);

getthirdstructurelist().then((res) => {
    if (res.code === 200) {
        formConfig[0].options = res.data.map((item) => ({ label: item.name, value: item.value }));
    }
});

const templateClick = (value) => {
    radio.value = radio.value == value ? !value : value;
    if (radio.value) {
        getinspectionitemtemplatelist().then((res) => {
            if (res.code === 200) {
                templateOption.value = res.data.map((item) => ({ label: item.name, value: item.value }));
            }
        });
    } else {
        form.value.templateId = "";
        templateOption.value = [];
    }
};
const structureChange = (value) => {
    formConfig[0].options.forEach((item) => {
        if (item.value == value) {
            form.value.structureName = item.label;
        }
    });
};
const add = () => {
    form.value = {
        templateName: "",
        remark: "",
        structureId: "",
        templateId: "",
        structureName: ""
    };
    dialogVisible.value = true;
};
const close = () => {
    dialogVisible.value = false;
};

const change = (data) => {
    if (first.value) {
        first.value = false;
    } else {
        loading.value = true;
        edittemplatestate({ id: data.id, state: data.state })
            .then((res) => {
                if (res.code === 200) {
                }
                commonListRef.value.tableRef.getTableList();
                loading.value = false;
            })
            .catch(() => {
                loading.value = false;
            });
    }
};

const submit = () => {
    if (!ruleFormRef.value) return;
    ruleFormRef.value.validate((valid) => {
        if (valid) {
            const loadingInstance = ElLoading.service();
            addstrategyinspectionitemtemplate(form.value)
                .then((res) => {
                    if (res.code === 200) {
                        router.push("/main/tacticalManagement/checkItemDetails?id=" + res.data.id + "&name=" + form.value.structureName);
                    }
                    loadingInstance.close();
                })
                .catch(() => {
                    loadingInstance.close();
                });
        }
    });
};
const toCheckItemDetails = (scope) => {
    router.push("/main/tacticalManagement/checkItemDetails?id=" + scope.scope.row.id + "&name=" + scope.scope.row.structureName);
};
const allDeletes = () => {
    const choose = commonListRef.value.tableRef.allSelectTable.flat().map((item) => item.id);
    if (choose.length == 0) {
        ElMessage({
            message: "请选中需要删除的数据再进行批量删除",
            type: "warning"
        });
        return;
    }
    ElMessageBox.confirm("确定删除吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: ""
    }).then(() => {
        const loadingInstance = ElLoading.service();
        batchdeletetemplate({
            ids: choose
        })
            .then((res) => {
                if (res.code === 200) {
                    ElMessage({
                        type: "success",
                        message: "删除成功"
                    });
                }

                commonListRef.value.tableRef.getTableList();
                loadingInstance.close();
            })
            .catch(() => {
                loadingInstance.close();
            });
    });
};
const deletes = (scope) => {
    ElMessageBox.confirm("确定删除吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: ""
    }).then(() => {
        const loadingInstance = ElLoading.service();
        batchdeletetemplate({
            ids: [scope.scope.row.id]
        })
            .then((res) => {
                if (res.code === 200) {
                    ElMessage({
                        type: "success",
                        message: "删除成功"
                    });
                }
                commonListRef.value.tableRef.getTableList();
                loadingInstance.close();
            })
            .catch(() => {
                loadingInstance.close();
            });
    });
};
const resert = () => {
    Object.keys(formData).forEach((key) => (formData[key] = ""));
};

provide("formData", formData);
provide("formConfig", formConfig);
provide("tableConfig", tableConfig);
provide("apiFn", getinspectionitemtamplatepage);
// provide("requestBody", "query");
provide("title", "检查项库");
</script>

<style lang="less" scoped>
::v-deep(.el-dialog__title) {
    color: #1b3646;
    font-weight: 600;
}
::v-deep(.el-form-item__label) {
    color: #1b3646;
}

.flex {
    display: flex;
}
.notice-list {
    height: 100%;
    .line {
        display: inline-block;
        margin: 0 13px;
        width: 1px;
        height: 8px;
        border: 1px solid #dcdcdc;
    }
    .btns {
        display: flex;
        .resert {
            border: 1px solid @main-color;
            color: @main-color;
        }
    }
}

.button {
    display: flex;
    justify-content: center;
}
.close {
    margin-left: 8px;
    width: 78px;
    height: 30px;
    border: 1px solid #00428e;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.closeText {
    color: #00428e;
    font-size: 14px;
    font-weight: 400;
}
.submit {
    width: 80px;
    height: 32px;
    background: #00428e;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.submitText {
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
}
</style>
<style>
.el-message-box__btns {
    justify-content: center;
}
.el-message-box__title {
    font-weight: 600;
    color: #1b3646;
}
.el-message-box__message {
    color: #1b3646;
}
.el-message-box__btns .el-button--primary {
    background-color: #00428e;
}
</style>
